<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px"  label-width="120px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库编码" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px"  label-width="120px" prop="name">
              <el-input v-model="form.name" placeholder="请输入仓库名称" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" style="margin-right:15px"  label-width="120px" prop="warehouseCode">
              <el-select v-model="form.warehouseCode" placeholder="请选择所属仓库" @change="findwarehouseSpaceList" style="width: 100%">
                <el-option v-for="item in warehouseList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库类型" style="margin-right:15px"  label-width="120px" prop="type" >
              <el-select v-model="form.type" placeholder="请选择仓库类型 " style="width:100%" clearable>
                <el-option
                  v-for="item in typeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启用库位管理" style="margin-right:15px"  label-width="120px">

            <div class="grid-content bg-purple">
              <el-checkbox label="" v-model="form.locationManagement"></el-checkbox>
            </div>
          </el-form-item>

        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" style="margin-right:15px"  label-width="120px" prop="contacts">
              <el-input v-model="form.contacts" placeholder="请输入联系人" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系电话" style="margin-right:15px"  label-width="120px" prop="landlineNumber">
              <el-input v-model="form.landlineNumber" placeholder="请输入联系电话" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px"  label-width="120px" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号"  maxlength="11" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" style="margin-right:15px"  label-width="120px" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真" maxlength="100" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" style="margin-right:15px"  label-width="120px" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="100" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="X坐标"  style="margin-right:15px"  label-width="120px" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入X坐标" maxlength="12" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="Y坐标" style="margin-right:15px"  label-width="120px" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入Y坐标" maxlength="12" style="width:100%"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>


      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所在区域" prop="areaList"  style="margin-right:15px"  label-width="120px">
              <el-cascader
                v-model="form.areaList"
                :options="areaOptions"
                style="width:100%"
                :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址"  style="margin-right:15px"  label-width="120px" prop="address">
              <el-input v-model="form.address" placeholder="请输入仓库详细地址" style="width:100%"  maxlength="500"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"  label-width="120px"  prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"  maxlength="500"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { warehouseSubmit } from '@/api/basicInfo'
import { SelectArea } from "@/api/orderform";
Vue.use(VXETable)
import {
  validatenumber,
  validatePhone,
  faxFormat,
  validEmail,
  validateTelephone
} from '@/utils/validate.js'
export default {
  data() {
    return {
      isDisable:false,   //确定键显示按钮

      typeData:[   //商品分类列表
        { code: "1", name: "生产仓" },
        { code: "2",name: "原料仓" },
        { code: "3",name: "成品仓" },
        { code: "4",name: "普通仓" },
      ],
      areaOptions: [],
      form: {
        areaList: [],
        address:'',        //地址
        city:'',           //市
        code:'',           //数据标识
        contacts:'',       //联系人
        country:'',        //国家
        county:'',         //县/区
        email:'',          //邮箱
        fax:'',            //传真
        groupCode:'',      //所属组织
        landlineNumber:'', //联系人号码
        latitude:'',       //维度
        longitude:'',      //经度
        name:'',           //仓库名称
        phoneNumber:'',    //手机号码
        province:'',       //省
        remarks:'',        //备注
        serialNumber:'',   //仓库代码
        locationManagement:true,
        status:'',         //状态
        type:'',           //仓库类型
      },
        rules: {
          name: [
            {required: true, message: '请输入仓库名称'},
          ],
          serialNumber: [
            {required: true, message: '请输入仓库编码'},
          ],
          type: [
            {required: true, message: '请选择仓库类型'},
          ],
          latitude: [
            // {required: true, message: '请输入纬度'},

            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '纬度必须大于0' }
          ],
          longitude: [
            // {required: true, message: '请输入经度'},

            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '经度必须大于0' }
          ],
            phoneNumber: [
                // {required: true, message: '请输入手机号'},
                {pattern: /^[1][0-9]{10}$/, message: '手机号格式有误！'}

            ],
            landlineNumber: [
              {
                required: false,
                validator(rule, value, callback) {
                  if (!rule.required && !value) return callback()
                  validateTelephone(value) ? callback() : callback(new Error('联系电话格式有误！'))
                }
              }
            ],
            fax: [
              {
                required: false,
                validator(rule, value, callback) {
                  if (!rule.required && !value) return callback()
                  faxFormat(value) ? callback() : callback(new Error('传真格式有误！'))
                }
              }
            ],
            email: [
              {
                required: false,
                validator(rule, value, callback) {
                  if (!rule.required && !value) return callback()
                  validEmail(value) ? callback() : callback(new Error('邮箱格式有误！'))
                }
              }
            ]
        },
    }
  },
  created() {
    // this.findWarehouseList()
    SelectArea().then(response => {
      this.areaOptions = response.data.records;
    });
  },
  methods: {

    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let arr = this.form
          for (let key in arr) {
            if (arr[key] === false) {
              arr[key] = 0
            }
            if (arr[key] === true) {
              arr[key] = 1
            }
          }
          const data = arr

          this.isDisable = true
          warehouseSubmit(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherAddMethod')
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        } else {
            return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
